


import { Card, Collapse, Typography, Divider, Button } from '@/utils/antd-imports';
import { BookOutlined, UserOutlined, ProjectOutlined, TeamOutlined, AuditOutlined, FileProtectOutlined, MoneyCollectOutlined, ApartmentOutlined } from '@/utils/icons';
import Steps from 'antd/es/steps';




const { Panel } = Collapse;
const { Step } = Steps;
const { Title, Paragraph, Text } = Typography;

export default function TutorialGuide() {
  return (
    <div style={{ padding: 24 }}>
      <Card title="凯泽利管理系统使用指南" bordered={false}>
        <Title level={4} style={{ marginBottom: 24 }}>欢迎使用凯泽利管理系统</Title>
        <Paragraph>
          本系统是为凯泽利公司定制的综合管理平台，集成了人事管理、项目管理、审批流程、合同管理等功能模块。
        </Paragraph>
        
        <Divider orientation="left">快速入门</Divider>
        <Steps current={1} direction="vertical" size="small">
          <Step 
            title="登录系统" 
            description="使用您的账号密码登录系统" 
            icon={<UserOutlined />}
          />
          <Step 
            title="熟悉界面" 
            description="左侧为功能菜单，顶部为快捷操作区域" 
            icon={<BookOutlined />}
          />
          <Step 
            title="开始使用" 
            description="根据您的权限使用相应功能" 
            icon={<ProjectOutlined />}
          />
        </Steps>
        
        <Divider orientation="left">功能模块介绍</Divider>
        <Collapse accordion defaultActiveKey={['1']}>
          <Panel header="人事管理" key="1" extra={<TeamOutlined />}>
            <Paragraph>
              <Text strong>员工花名册：</Text>查看和管理公司所有员工的基本信息，支持按学历、专业、院校、性别、婚否、所属单位等条件筛选。
            </Paragraph>
            <Paragraph>
              <Text strong>档案管理：</Text>维护员工的档案资料，包括教育背景、工作经历、技能证书等。
            </Paragraph>
            <Paragraph>
              <Text strong>员工合同：</Text>管理员工的劳动合同及相关协议，跟踪合同到期时间。
            </Paragraph>
            <Paragraph>
              <Text strong>考勤管理：</Text>记录和统计员工考勤情况，支持加班、请假、调休等管理。
            </Paragraph>
          </Panel>
          <Panel header="项目管理" key="2" extra={<ProjectOutlined />}>
            <Paragraph>
              <Text strong>项目立项：</Text>创建新项目，填写项目基本信息、预算、时间计划等。
            </Paragraph>
            <Paragraph>
              <Text strong>项目成员：</Text>为项目分配成员，设置角色和权限，管理项目人员。
            </Paragraph>
            <Paragraph>
              <Text strong>项目结算：</Text>项目完成后进行结算操作，包括验收、开票、回款等流程。
            </Paragraph>
            <Paragraph>
              <Text strong>公司主体管理：</Text>管理项目相关的公司主体信息，包括公司名称、税率、编号等。
            </Paragraph>
            <Paragraph>
              <Text strong>客户信息管理：</Text>维护客户基本信息，包括客户名称、编号、状态等。
            </Paragraph>
          </Panel>
          <Panel header="审批中心" key="3" extra={<AuditOutlined />}>
            <Paragraph>
              <Text strong>项目审批：</Text>审批新创建的项目，支持多级审批流程。
            </Paragraph>
            <Paragraph>
              <Text strong>开票审批：</Text>审批项目开票申请，管理发票相关流程。
            </Paragraph>
            <Paragraph>
              <Text strong>离职审批：</Text>处理员工的离职申请，完成离职手续。
            </Paragraph>
            <Paragraph>
              <Text strong>审批设置：</Text>配置审批流程，支持表格视图和步骤视图切换。
            </Paragraph>
          </Panel>
          <Panel header="产值中心" key="4" extra={<MoneyCollectOutlined />}>
            <Paragraph>
              <Text strong>产值统计：</Text>统计和分析项目产值数据，生成各类报表。
            </Paragraph>
            <Paragraph>
              <Text strong>产值分配：</Text>管理项目产值的分配和结算。
            </Paragraph>
            <Paragraph>
              <Text strong>产值报表：</Text>生成详细的产值报表，支持导出功能。
            </Paragraph>
          </Panel>
          <Panel header="财务管理" key="5" extra={<MoneyCollectOutlined />}>
            <Paragraph>
              <Text strong>财务概览：</Text>查看公司整体财务状况，包括收入、支出、利润等。
            </Paragraph>
            <Paragraph>
              <Text strong>薪资管理：</Text>管理员工薪资发放，计算工资和奖金。
            </Paragraph>
            <Paragraph>
              <Text strong>报销申请：</Text>处理员工报销申请，审核费用支出。
            </Paragraph>
          </Panel>
          <Panel header="资产管理" key="6" extra={<FileProtectOutlined />}>
            <Paragraph>
              <Text strong>固定资产：</Text>管理公司固定资产，包括设备、办公用品等。
            </Paragraph>
            <Paragraph>
              <Text strong>流动资产：</Text>管理流动资产，包括现金、银行存款等。
            </Paragraph>
            <Paragraph>
              <Text strong>车辆管理：</Text>管理公司车辆使用和维护。
            </Paragraph>
            <Paragraph>
              <Text strong>供应商管理：</Text>管理供应商信息，维护供应商关系。
            </Paragraph>
          </Panel>
          <Panel header="组织管理" key="7" extra={<ApartmentOutlined />}>
            <Paragraph>
              <Text strong>组织架构：</Text>配置公司组织架构，管理部门和岗位。
            </Paragraph>
            <Paragraph>
              <Text strong>用户管理：</Text>管理系统用户，分配角色和权限。
            </Paragraph>
          </Panel>
        </Collapse>
        
        <Divider orientation="left">常见问题</Divider>
        <Collapse>
          <Panel header="如何创建新项目？" key="5">
            <Paragraph>
              1. 点击左侧菜单中的"项目管理" → "项目立项"
            </Paragraph>
            <Paragraph>
              2. 点击"新建项目"按钮
            </Paragraph>
            <Paragraph>
              3. 填写项目信息并提交
            </Paragraph>
          </Panel>
          <Panel header="如何管理员工考勤？" key="6">
            <Paragraph>
              1. 进入"人事管理" → "项目成员" → "考勤管理"标签页
            </Paragraph>
            <Paragraph>
              2. 可以查看员工考勤明细，支持按日期筛选
            </Paragraph>
            <Paragraph>
              3. 点击具体日期可以调整工作时间或加班时间
            </Paragraph>
            <Paragraph>
              4. 支持导出考勤数据为Excel文件
            </Paragraph>
          </Panel>
          <Panel header="如何进行项目结算？" key="7">
            <Paragraph>
              1. 进入"项目管理" → "项目结算"
            </Paragraph>
            <Paragraph>
              2. 选择需要结算的项目
            </Paragraph>
            <Paragraph>
              3. 在"验收"标签页完成项目验收
            </Paragraph>
            <Paragraph>
              4. 在"开票"标签页处理发票相关事宜
            </Paragraph>
            <Paragraph>
              5. 在"回款"标签页跟踪回款情况
            </Paragraph>
          </Panel>
          <Panel header="如何配置审批流程？" key="8">
            <Paragraph>
              1. 进入"审批中心" → "审批设置"
            </Paragraph>
            <Paragraph>
              2. 可以切换表格视图和步骤视图查看审批流程
            </Paragraph>
            <Paragraph>
              3. 点击"添加审批流程"创建新的审批流程
            </Paragraph>
            <Paragraph>
              4. 设置审批步骤和审批角色
            </Paragraph>
          </Panel>
          <Panel header="如何筛选员工信息？" key="9">
            <Paragraph>
              1. 进入"人事管理" → "员工花名册"
            </Paragraph>
            <Paragraph>
              2. 使用基础筛选：姓名、项目名称、部门
            </Paragraph>
            <Paragraph>
              3. 点击"更多筛选"展开高级筛选选项
            </Paragraph>
            <Paragraph>
              4. 可以按学历、专业、院校、性别、婚否、所属单位等条件筛选
            </Paragraph>
          </Panel>
          <Panel header="如何查看通知？" key="10">
            <Paragraph>
              1. 点击顶部导航栏的铃铛图标查看通知
            </Paragraph>
            <Paragraph>
              2. 未读通知会有红色标记显示
            </Paragraph>
            <Paragraph>
              3. 系统支持WebSocket实时推送通知
            </Paragraph>
            <Paragraph>
              4. 通知类型包括审批、考勤、项目、系统等
            </Paragraph>
          </Panel>
          <Panel header="忘记密码怎么办？" key="11">
            <Paragraph>
              请联系系统管理员重置密码，管理员账号可以在登录页面使用"忘记密码"功能。
            </Paragraph>
          </Panel>
          <Panel header="如何导出数据？" key="12">
            <Paragraph>
              大部分列表页面都支持数据导出功能：
            </Paragraph>
            <Paragraph>
              • 员工花名册：支持导出员工信息
            </Paragraph>
            <Paragraph>
              • 考勤管理：支持导出考勤数据
            </Paragraph>
            <Paragraph>
              • 项目结算：支持导出结算报表
            </Paragraph>
            <Paragraph>
              点击页面上的"导出"按钮即可下载Excel文件
            </Paragraph>
          </Panel>
        </Collapse>
        
        <Divider />
        <Paragraph type="secondary">
          如需更多帮助，请联系技术支持：<Button type="link" size="small">tech-support@kaizeli.com</Button>
        </Paragraph>
      </Card>
    </div>
  );
}